<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'/>
  <link rel='stylesheet' href='../../dist/mapbox.css'/>
  <link rel='stylesheet' href='embed.css'/>
  <script src='../../dist/mapbox.js'></script>
  <script src='access_token.js'></script>
</head>
<body>
<style>
    #geolocate {
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 158px;
        margin-left: -80px;
        z-index: 1000;
        text-align: center;
        padding: 10px 0;
        display: block;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }
</style>
<div id='map'>
  <a href='#' id='geolocate'>Find me</a>
</div>
<script>
    var map = L.mapbox.map('map', 'tristen.map-ixqro653');
    var geolocate = document.getElementById('geolocate');

    // This uses the HTML5 geolocation API, which is available on
    // most mobile browsers and modern browsers, but not in Internet Explorer
    //
    // See this chart of compatibility for details:
    // http://caniuse.com/#feat=geolocation
    if (!navigator.geolocation) {
        geolocate.innerHTML = 'geolocation is not available';
    } else {
        geolocate.onclick = function (e) {
            e.preventDefault();
            e.stopPropagation();
            map.locate();
        };
    }

    // Once we've got a position, zoom and center the map
    // on it, and add a single marker.
    map.on('locationfound', function(e) {
        map.fitBounds(e.bounds);

        map.featureLayer.setGeoJSON({
            type: "Feature",
            geometry: {
                type: "Point",
                coordinates: [e.latlng.lng, e.latlng.lat]
            },
            properties: {
                'marker-color': '#000',
                'marker-symbol': 'star-stroked'
            }
        });

        // And hide the geolocation button
        geolocate.parentNode.removeChild(geolocate);
    });

    // If the user chooses not to allow their location
    // to be shared, display an error message.
    map.on('locationerror', function() {
        geolocate.innerHTML = 'position could not be found';
    });
</script>
</body>
</html>
